Decorator Pattern

1 min read
Foundational1 min read
Rapid overview

Decorator Pattern

TL;DR

Decorators wrap an object or function to add behavior without changing the original.

Why it matters

  • Adds cross-cutting behavior (logging, caching, retries).
  • Avoids deep inheritance chains.

How it works


Example (TypeScript)

type Handler = (input: string) => string;

const base: Handler = (input) => input.trim();

const withTelemetry = (handler: Handler): Handler => (input) => {
  const result = handler(input);
  console.log('handled', { input, result });
  return result;
};

withTelemetry(base)('  hello  ');

Quick recall Q&A

Q: Where do decorators show up in frontend work? A: Middleware chains, API client wrappers, React HOCs, and Angular interceptors.

See also